<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>端APIttttt</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <style>
    body{background:#EFEFF4;}
.shareCard_search {
    padding: 10px;
    padding-bottom: 5px;
    overflow: hidden;
    position: relative;
}
.shareCard_search input {
    width: 70%;
    border: 0;
    height: 30px;
    border-radius: 3px;
    float: left;
    padding: 0 5px;
    background: #fff;
}
.shareCard_search #clear_phone_num_input{
    width:30px;height:30px;line-height: 30px;float: left;margin-left:-30px;position: absolute;top:10px;left: 70%;
}
.shareCard_search button {
    width: 20%;
    border: 0;
    height: 30px;
    color: #fff;
    border-radius: 3px;
    font-size: 14px;
    background: #ec6d65;
    float: right;
}
#add {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    padding: 0 10px;
    background: #EFEFF4;
    box-sizing: border-box;
}
#add .data_items {
    background: #fff;
    border-radius: 5px;
    margin-top: 10px;
}
#add .data_items a {
    display: block;
    color: #333;
    font-size: 17px;
}
.order_list {
    position: relative;
    overflow: hidden;
    line-height: 30px;
    font-size: 14px;
}
.order_title {
    color: #fff;
    background: #ec6d65;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
#add .order_content {
    font-size: 14px;
}
#add .order_bottom {
    font-size: 14px;
}
.c_l {
    width: 70%;
    float: left;
    padding-left: 10px;
}
.c_r {
    position: absolute;
    display: block;
    right: 10px;
    height: 30px;
    line-height: 30px;
}
.datas_item {
    position: relative;
}
.datas_item .c_r {
    position: absolute;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
}

    </style>
</head>
<body>
    <div class="shareCard_search">
		<input type="number" id="phone_num" placeholder="请输入手机号">
        <span id="clear_phone_num_input" onclick="clearInputBtn();">清空</span>
		<button id="search_btncc" onclick="searchSahrecar();">搜索</button>
	</div>
	<div id="add">
		
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/urlpath.js"></script>
<script>
    var iPage = 0;
    var countNum = 20;
	apiready = function () {
        setRefreshHeader();
        setRefreshFooter();
        $api.html($api.byId("add"),""); //清空容器
        iPage=0 ;
        rendorSharecard(0,20);//渲染乐享卡
        clearInput();
    }
    
    $api.addEvt($api.byId("search_btncc"), 'touchstart', function(e) {
        $api.css($api.byId("search_btncc"),'background:#F9817A;');
    });
    $api.addEvt($api.byId("search_btncc"), 'touchend', function(e) {
        $api.css($api.byId("search_btncc"),'background:#ec6d65;');
    });
    
    var search_inputc = document.getElementById("phone_num");
    search_inputc.oninput = function(){ //监听输入框
        if($api.val($api.byId("phone_num")) != null || $api.val($api.byId("phone_num")) != ""){
            $api.css($api.byId("clear_phone_num_input"),"display:block;");
        }
    }
    
    function clearInput(){
        if($api.val($api.byId("phone_num")) == null || $api.val($api.byId("phone_num")) == ""){
            $api.css($api.byId("clear_phone_num_input"),"display:none;");
        }
    }
    function clearInputBtn(){
        $api.val($api.byId("phone_num"),"");
        $api.html($api.byId("add"),"");//清空容器
        iPage=0 ;
        rendorSharecard(iPage,countNum);//渲染乐享卡
    }
	function setRefreshHeader() { //下拉刷新
        api.setRefreshHeaderInfo({
            visible: true,
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...',
            showTime: true
        }, function (ret, err) {
            $api.val($api.byId("phone_num"),"");
            $api.html($api.byId("add"),"");//清空容器
            iPage=0 ;
        	rendorSharecard(0,20);//渲染乐享卡
            api.refreshHeaderLoadDone();
        });
    }
    function setRefreshFooter(){//上拉加载
    	api.addEventListener(
            {
                name: 'scrolltobottom',
                extra:{
                    threshold:100
                }
            }, 
            function (ret, err) {
                if($api.val($api.byId("phone_num")) == null || $api.val($api.byId("phone_num")) == ""){
                    iPage+=countNum;
                    rendorSharecard(iPage,countNum);//渲染乐享卡
                    api.parseTapmode();
                }
        });
    }
    
    function rendorSharecard(iPage,countNum){
        document.getElementById("phone_num").blur();
        clearInput();
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '努力加载中...',
            text: '请稍候...',
            modal: false
        });
        api.ajax({
            url: URLpath+'/ajax/call/vender_admin/sharecard_list',
            method: 'post',
            data: {
                values: { 
                    "start": iPage,
                    "count":countNum
                }
            },
            timeout:5
        },function(ret, err){
            api.hideProgress();

            if (ret) {
                if(!ret || ret.errno ){
                    api.toast({
                        msg: ret.errmsg,
                        duration: 2000,
                        location: 'middle'
                    });
                }else{
                    var res = ret.sharecard_list ;
                    if(res.length > 0){
                        for(var j = 0; j < res.length; j++){
                            var trs = ''; 
                            trs += '<div class="data_items" order_id="1003894">'; 
                            trs += '<a href="javascript:void(0);" class="order_list_btn">'; 
                            trs += '<div class="order_list order_title">'; 
                            trs += '<div class="c_l">'+res[j].goods_name+'</div>'; 
                            trs += '<span class="c_r">'+res[j].total_count+'次卡</span>'; 
                            trs += '</div>'; 
                            trs += '<div class="order_list order_content">'; 
                            trs += '<div class="datas_item">'; 
                            trs += '<div class="c_l"><p>商家:'+res[j].vender_name+'</p><p>电话:'+res[j].user_mobile+'</p></div>'; 
                            trs += '<span class="c_r">剩余:'+res[j].left_count+'次</span>'; 
                            trs += '</div>'; 
                            trs += '</div>'; 
                            trs += '<div class="order_list order_bottom">'; 
                            var dateString = res[j].expire_date;
                            var pattern = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/;
                            var formatedDate = dateString.replace(pattern, '$1-$2-$3 $4:$5:$6');
                            trs += '<div class="c_l">有效期至：'+formatedDate+'</div>'; 
                            trs += '<span class="c_r"></span>'; 
                            trs += '</div>'; 
                            trs += '</a>'; 
                            trs += '</div>'; 
                            $api.append($api.byId("add"),trs);
                        }
                    }else{
                        if($api.byId("no_data")){

                        }else{
                            $api.append($api.byId("add"),'<div id="no_data" style="line-height:30px;text-align:center;">没有更多数据</div>');
                        }
                    }
                }
            } else {
                api.confirm({
                    title: '系统提示',
                    msg: '网络请求超时，下拉刷新试试？',
                    buttons: ['确定']
                },function( ret, err ){
                    
                });
            }
        });
    }
    function searchSahrecar(){
        if($api.val($api.byId("phone_num")) == "" || $api.val($api.byId("phone_num")) == null){
            // alert("请输入手机号");
            api.toast({
                msg: '请输入手机号',
                duration: 2000,
                location: 'middle'
            });
        }else{
            api.showProgress({
                style: 'default',
                animationType: 'fade',
                title: '努力加载中...',
                text: '请稍候...',
                modal: false
            });
            api.ajax({
                url: URLpath+'/ajax/call/vender_admin/sharecard_list',
                method: 'post',
                data: {
                    values: { 
                        "mobile":$api.val($api.byId("phone_num"))
                    }
                },
                timeout:5
            },function(ret, err){
                api.hideProgress();
                if (ret) {
                    if(!ret || ret.errno ){
                        api.toast({
                            msg: ret.errmsg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }else{
                        $api.html($api.byId("add"),""); //清空容器
                        var res = ret.sharecard_list ;
                        if(res.length > 0){
                            for(var j = 0; j < res.length; j++){
                                var trs = ''; 
                                trs += '<div class="data_items" order_id="1003894">'; 
                                trs += '<a href="javascript:void(0);" class="order_list_btn">'; 
                                trs += '<div class="order_list order_title">'; 
                                trs += '<div class="c_l">'+res[j].goods_name+'</div>'; 
                                trs += '<span class="c_r">'+res[j].total_count+'次卡</span>'; 
                                trs += '</div>'; 
                                trs += '<div class="order_list order_content">'; 
                                trs += '<div class="datas_item">'; 
                                trs += '<div class="c_l"><p>商家:'+res[j].vender_name+'</p><p>电话:'+res[j].user_mobile+'</p></div>'; 
                                trs += '<span class="c_r">剩余:'+res[j].left_count+'次</span>'; 
                                trs += '</div>'; 
                                trs += '</div>'; 
                                trs += '<div class="order_list order_bottom">'; 
                                trs += '<div class="c_l">有效期至：'+res[j].expire_date+'</div>'; 
                                trs += '<span class="c_r"></span>'; 
                                trs += '</div>'; 
                                trs += '</a>'; 
                                trs += '</div>'; 
                                $api.append($api.byId("add"),trs);
                            }
                            $api.append($api.byId("add"),'<div id="no_data" style="line-height:30px;text-align:center;">没有更多数据</div>');
                        }else{
                            if($api.byId("no_data")){

                            }else{
                                $api.append($api.byId("add"),'<div id="no_data" style="line-height:30px;text-align:center;">没有更多数据</div>');
                            }
                        }
                    }
                } else {
                    api.confirm({
                        title: '系统提示',
                        msg: '网络请求超时，下拉刷新试试？',
                        buttons: ['确定']
                    },function( ret, err ){
                        
                    });
                }
            });
        }
    }
</script>
</html>